<template>
  <el-dialog
  v-model="dialogVisible"
  :title="formData.id?'修改目录':'新增目录'"
  align-center
  @close="close"
>
<el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="100px"
  size="default" @submit.prevent>
  <el-form-item label="所属学科：" prop="subjectID" class="required">
      <el-select v-model="formData.subjectID" class="full-width-input" clearable>
        <el-option v-for="(item, index) in subjectIDOptions" :key="index" :label="item.subjectName"
          :value="item.id" :disabled="item.disabled"></el-option>
      </el-select>
    </el-form-item>
  <el-form-item label="目录名称" prop="tagName" class="required">
    <el-input v-model="formData.tagName" type="text" clearable></el-input>
  </el-form-item>
</el-form>
  <template #footer>
    <el-row class="dialog-footer" type="flex" justify="end">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submitForm"
        >确认</el-button
      >
    </el-row>
  </template>
</el-dialog>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { add, update } from '@/api/hmmm/tags.js'
import { ElMessage } from 'element-plus'
import { toRefs, reactive, getCurrentInstance, onMounted } from 'vue'
export default {
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  setup (props, { emit }) {
    onMounted(async () => {
      const { data: { items } } = await list(state.page)
      state.subjectIDOptions = items
    })
    // 关闭弹窗
    function close () {
      emit('close')
    }
    // 提交
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs.vForm.validate(async valid => {
        if (!valid) return
        if (state.formData.id) {
          await update(state.formData)
        } else {
          await add(state.formData)
        }
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        // TODO: 提交表单
        emit('getList')
        emit('close')
      })
    }
    const resetForm = () => {
      instance.ctx.$refs.vForm.resetFields()
    }
    // 数据
    const state = reactive({
      page: {
        page: 1,
        pagesize: 999
      },
      formData: {
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectID: [{
          required: true,
          message: '字段值不可为空'
        }],
        tagName: [{
          required: true,
          message: '字段值不可为空'
        }]
      },
      subjectIDOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }]
    })
    return {
      ...toRefs(state),
      submitForm,
      close,
      resetForm
    }
  }
}

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
.el-input {
  width: 217px;
}
::v-deep(.el-dialog.is-align-center)  {
  width: 400px !important;
}
</style>
